<template>
<view class="container_main">
		<view class="draw_box">
			<!--左上-->
			<view class="li" :class='amplification_index===1?"indexli":""'>
				<view></view>
				<image src="https://file03.esurl.cn/maidong/2020/YS899/images/ward1.png" class="ward1"></image>
				<text class="award_txt">微信红包\n1.6元</text>
			</view>
			<!--上-->
			<view class="li" :class='amplification_index===2?"indexli":""'>
				<view></view>
				<image src="https://file03.esurl.cn/maidong/2020/YS899/images/ward2.png" class="ward2"></image>
				<text class="award_txt">脉动限量礼盒</text>
			</view>
			<!--右上-->
			<view class="li" :class='amplification_index===3?"indexli":""'>
				<view></view>
				<image src="https://file03.esurl.cn/maidong/2020/YS899/images/ward1.png" class="ward1"></image>
				<text class="award_txt">微信红包\n0.3元</text>
			</view>
			<!--左-->
			<view class="li" :class='amplification_index===8?"indexli":""'>
				<view></view>
				<image src="https://file03.esurl.cn/maidong/2020/YS899/images/ward1.png" class="ward1"></image>
				<text class="award_txt">微信红包\n0.3元</text>
			</view>
			<!--开始-->
			<view class="li">
				<button class="draw_btn" @click="startrolling" :disabled="!roll_flag"></button>
			</view>
			<!--右-->
			<view class="li" :class='amplification_index===4?"indexli":""'>
				<view></view>
				<image src="https://file03.esurl.cn/maidong/2020/YS899/images/ward1.png" class="ward1"></image>
				<text class="award_txt">微信红包\n6.6元</text>
			</view>
			<!--左下-->
			<view class="li" :class='amplification_index===7?"indexli":""'>
				<view></view>
				<image src="https://file03.esurl.cn/maidong/2020/YS899/images/ward1.png" class="ward1"></image>
				<text class="award_txt">微信红包\n16元</text>
			</view>
			<!--下-->
			<view class="li" :class='amplification_index===6?"indexli":""'>
				<view></view>
				<image src="https://file03.esurl.cn/maidong/2020/YS899/images/ward5.png" class="ward5"></image>
				<text class="award_txt">脉动限量海报</text>
			</view>
			<!--右下-->
			<view class="li" :class='amplification_index===5?"indexli":""'>
				<view></view>
				<image src="https://file03.esurl.cn/maidong/2020/YS899/images/ward1.png" class="ward1"></image>
				<text class="award_txt">微信红包\n1.6元</text>
			</view>
		</view>
	</view>
</template>
<script>
export default {
  data() {
    return {
      last_index: 0, //上一回滚动的位置
      amplification_index: 0, //轮盘的当前滚动位置
      roll_flag: true, //是否允许滚动
      max_number: 8, //轮盘的全部数量
      speed: 200, //速度，速度值越大，则越慢 初始化为300
      finalindex: 5, //最终的奖励距离当前的位置！不是最后的几等奖！
      myInterval: "", //定时器
      max_speed: 40, //滚盘的最大速度
      minturns: 8, //最小的圈数为2
      runs_now: 0, //当前已跑步数
      prizeIndex:0,
      prizeList:[
          {id:1,name:'1.6元红包'},
          {id:2,name:'脉动限量礼盒'},
          {id:3,name:'0.3元红包'},
          {id:4,name:'6.6元红包'},
          {id:5,name:'1.6元红包'},
          {id:6,name:'脉动限量海报'},
          {id:7,name:'16元红包'},
          {id:8,name:'0.3元红包'},
      ]
    };
  },
  methods: {
      //开始滚动
  startrolling: function () {
    let _this = this;
    _this.runs_now = 0;
    if (_this.roll_flag) {
      _this.roll_flag=false
      _this.$emit('getIndex')
    }
  },
    //滚动轮盘的动画效果
    rolling: function (prizeIndex) {
        if(prizeIndex){
            this.prizeIndex=prizeIndex-1;
        }
      var _this = this;
      this.myInterval = setTimeout(function () {
        _this.rolling();
      }, this.speed);
      this.runs_now++; //已经跑步数加一
      this.amplification_index++; //当前的加一
      var count_num =
        this.minturns * this.max_number + this.finalindex - this.last_index;
      if (this.runs_now <= (count_num / 3) * 2) {
        this.speed -= 20; //加速
        if (this.speed <= this.max_speed) {
          this.speed = this.max_speed; //最高速度为40；
        }
      }

      //下降期间
      else if (count_num - this.runs_now <= 10) {
        this.speed += 20;
        if (this.amplification_index == this.prizeList[this.prizeIndex].id) {
          clearInterval(this.myInterval);
          uni.showModal({
            content: this.prizeList[this.prizeIndex].name,
            showCancel: false,
          });
        }
        if (count_num - this.runs_now < 0) {
          clearInterval(this.myInterval);
          uni.showModal({
            content: this.prizeList[this.prizeIndex].name,
            showCancel: false,
          });
        }
      }
      else {
        this.speed += 10;
        if (this.speed >= 100) {
          this.speed = 100; //最低速度为100；
        }
      }
      if (this.amplification_index > this.max_number) {
        this.amplification_index = 0;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.container_main {
  width: 750rpx;
}

.draw_box {
  width: 600rpx;
  height: 600rpx;
  background: url("https://file03.esurl.cn/maidong/2020/YS899/images/gamebg.png")
    no-repeat;
  background-size: 100% 100%;
  padding: 6% 6%;
  display: flex; 
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: hidden;
  margin: 0 auto;
}

.li,
a {
    flex-shrink: 0;
  background: url("https://file03.esurl.cn/maidong/2020/YS899/images/wardbg.png")
    no-repeat;
  background-size: 100% 100%;
  margin: 5rpx;
  width: 31%;
  height: 31%;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  border-radius: 5rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}



.active {
  background: red;
  color: #fff;
}



.indexli view {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0.4;
  left: 0;
  top: 0;
  border-radius: 20rpx;
}



.ward1 {
  width: 57rpx;
  height: 74rpx;
}


.ward2 {
  width: 99rpx;
  height: 80rpx;
}

.draw_btn {
  width: 145rpx;
  height: 135rpx;
  background: url("https://file03.esurl.cn/maidong/2020/YS899/images/ward0.png")
    no-repeat;
  background-size: 100% 100%;
}

.ward5 {
  width: 60rpx;
  height: 89rpx;
}

.flex {
  width: 515rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
button[disabled] {
  opacity: 0.7;
  background-color: transparent !important;
}
</style>